<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>余学海</title>
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./css/tob.css">
  <link rel="stylesheet" href="./css/nek.css">
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 100%;
      height: 28%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      height: 100%;
      width: 100%;
    }

    .lb img {
      width: 100%;
      height: 100%;
    }

    .tob {
      width: 100%;
      background-color: #F6F6F6;
      display: flex;
      flex-wrap: wrap;
      font-size: 10px;
      padding-bottom: 10px;

      justify-content: space-around;
    }

    .tob div {
      width: 16%;
      color: #666;
      text-align: center;
      margin-bottom: 10 px;
      margin-right: 2%;
      margin-left: 2%;
    }

    .tob img {
      display: block;
      margin: 0px auto;
      width: 80%;
    }

    .mn {
      width: 100%;
      position: absolute;
    }

    .imga {
      width: 100%;
      height: 200px;
    }

    .wa {
      width: 100%;
    }

    /* .swiper-slide .zj{
      height: 100%;
    } */
    .swiper-container .xdian {
      bottom: 3px;
    }

    .jddw {
      position: relative;
    }

    .swiper-container1 {
      margin-top: 10px;
      border-radius: 10px;
      width: 90%;
      margin: 0px auto;
      overflow: hidden;
    }
    .cjd{
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="tob-bar ">
    <div class="tob-left">×</div>
    <div class="tob-center"><img src="./图片/图标.png" alt=""></div>
    <div class="tob-centertow">打开京东App，购物更轻松</div>
    <div class="tob-right">立即打开</div>
  </div>
  <!-- 搜索框 -->
  <div class="tob-bartow">
    <div class="tob-bartowLeft"><img src="./img/精灵图.png" alt=""></div>
    <div class="bartow-st">
      <img src="./img/2021-03-28_164610.png" alt="" class="jda">
      <span>|</span>
      <div class="jlt"></div>
      <input type="text" placeholder="搜索">
    </div>
    <div class="bartow-r">登录</div>
  </div>
  <!-- 轮播图 -->
  <div class="swiper-container1 jddw lb">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="./img/a.webp" alt="">
      </div>
      <div class="swiper-slide">
        <img class="imga" src="./img/q.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="imga" src="./img/k.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="./img/g.jpg" alt="">
      </div>
    </div>
    <div class="swiper-pagination xdian"></div>
  </div>
  <div class="swiper-container">
    <div class="swiper-wrapper">

      <div class="tob swiper-slide">
        <div class="left"><img src="./img/1.png" alt="">京东超市</div>
        <div><img src="./img/2.png" alt="">数码电器</div>
        <div><img src="./img/3.png" alt="">京东服饰</div>
        <div><img src="./img/4.png" alt="">京东生鲜</div>
        <div><img src="./img/5.png" alt="">京东到家</div>
        <div><img src="./img/6.png" alt="">充值缴费</div>
        <div><img src="./img/7.png"alt="">9.9元拼</div>
        <div><img src="./img/8.png" alt="">领劵</div>
        <div><img src="./img/9.png" alt="">领金贴</div>
        <div><img src="./img/10.png" alt="">PLUS会员</div>
      </div>
      <div class="tob swiper-slide">
        <div class="left"><img src="./img/11.png" alt="">京东国际</div>
        <div><img src="./img/12.png" alt="">京东拍卖</div>
        <div><img src="./img/13.png" alt="">唯品会</div>
        <div><img src="./img/14.png" alt="">玩3c</div>
        <div><img src="./img/15.png" alt="">沃尔玛</div>
        <div><img src="./img/16.png" alt="">美妆馆</div>
        <div><img src="./img/17.png" alt="">京东旅行</div>
        <div><img src="./img/18.png" alt="">拍拍二手</div>
        <div><img src="./img/19.png" alt="">物流查询</div>
        <div><img src="./img/20.png" alt="">全部</div>
      </div>>
    <div class="swiper-pagination xdian"></div>
  </div>
  <!-- 底部tob -->
  <ul class="btoo">
    <li><img src="./img/首页.png" alt=""></li>
    <li><img src="./img/分类.png" alt=""></li>
    <li><img src="./img/惊喜.png" alt=""></li>
    <li><img src="./img/购物车.png" alt=""></li>
    <li><img src="./img/登录.png" alt=""></li>
  </ul>

<div class="cjd"></div>
  <script src="./js/swiper.min.js"></script>
  <script>
    var swiper1 = new Swiper('.swiper-container1', {
      spaceBetween: 30,
      loop: true,
      autoplay: {
        delay: 3000,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
    var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  </script>
</body>

</html>